{{template "main" .}}
  <!-- Navbar -->
  <nav class="main-header navbar navbar-expand navbar-white navbar-light">
    <!-- Left navbar links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
      </li>
      <li class="nav-item d-none d-sm-inline-block">
        <a href="/template" class="nav-link">模版管理</a>
      </li>
    </ul>

  </nav>
  <!-- /.navbar -->

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>自定义模版管理</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
				<a href="/template/add" class="btn btn-default bg-warning">
					<i class="fas fa-file mr-2"></i> 添加模版
				</a>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">

      <!-- Default box -->
      <div class="card">
        <div class="card-header">
          <h3 class="card-title"></h3>

          <div class="card-tools">
            <!--<button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
              <i class="fas fa-minus"></i>
            </button>
            <button type="button" class="btn btn-tool" data-card-widget="remove" title="Remove">
              <i class="fas fa-times"></i>
            </button>-->
            <input type="file" id="files"/>
			<a onclick="importTemplate();" href="javascript:void(0);" class="btn btn-default bg-info">
				<i class="fas fa-file mr-2"></i> 导入模版
			</a>
			<a onclick="exportTemplate();" href="javascript:void(0);" class="btn btn-default bg-success">
				<i class="fas fa-file mr-2"></i> 导出全部模版
			</a>
          </div>
        </div>
        <div class="card-body">


			<table class="table table-hover">
				<thead>
					<tr>
						<!--<th>Id</th>-->
						<th>名称</th>
						<th>模版类型</th>
						<th>模版用途</th>
						<th>路径</th>
						<th>创建时间</th>
						<!--<th>模版测试</th>-->
						<th>模版编辑</th>
						<th>模版删除</th>
					</tr>
				</thead>
				<tbody id="tpllist" >
					{{range .Template}}
					<tr>
						<!--<th>{{.Id}}</th>-->
						<th>{{.Tplname}}</th>
						<th>
                           {{if eq .Tpltype "dd"}}钉钉{{end}}
                           {{if eq .Tpltype "wx"}}企业微信{{end}}
                           {{if eq .Tpltype "workwechat"}}企业微信应用{{end}}
                           {{if eq .Tpltype "fs"}}飞书{{end}}
                           {{if eq .Tpltype "webhook"}}WebHook{{end}}
                           {{if eq .Tpltype "txdx"}}腾讯云短信{{end}}
                           {{if eq .Tpltype "txdh"}}腾讯云电话{{end}}
                           {{if eq .Tpltype "alydx"}}阿里云短信{{end}}
                           {{if eq .Tpltype "alydh"}}阿里云电话{{end}}
                           {{if eq .Tpltype "hwdx"}}华为云短信{{end}}
                           {{if eq .Tpltype "bddx"}}百度云短信{{end}}
                           {{if eq .Tpltype "rlydh"}}容联云电话{{end}}
                           {{if eq .Tpltype "7moordx"}}七陌短信{{end}}
                           {{if eq .Tpltype "7moordh"}}七陌语音电话{{end}}
                           {{if eq .Tpltype "email"}}Email{{end}}
						   {{if eq .Tpltype "tg"}}Telegram{{end}}
						   {{if eq .Tpltype "rl"}}百度Hi(如流){{end}}
						   {{if eq .Tpltype "bark"}}Bark(iPhone推送){{end}}
						   {{if eq .Tpltype "voice"}}语音播报{{end}}
						   {{if eq .Tpltype "fsapp"}}飞书机器人应用{{end}}
						   {{if eq .Tpltype "kafka"}}Kafka{{end}}
                        </th>
                        <th>{{if eq .Tpluse "ALiYun"}}阿里云-云监控{{else}}{{.Tpluse}}{{end}}</th>
						<th>
                        	/prometheusalert?type={{.Tpltype}}&tpl={{.Tplname}}{{if eq .Tpluse "ALiYun"}}&from=aliyun{{end}}{{if eq .Tpltype "dd"}}&ddurl=钉钉机器人地址&at=18888888888{{else}}{{if eq .Tpltype "wx"}}&wxurl=微信机器人地址&at=zhangsan{{else}}{{if eq .Tpltype "fs"}}&fsurl=飞书机器人地址&at=zhangsan@xxx.com{{else}}{{if eq .Tpltype "webhook"}}&webhookurl=WebHook地址{{else}}{{if eq .Tpltype "email"}}&email=Email地址{{else}}{{if eq .Tpltype "rl"}}&groupid=百度Hi(如流)群id{{else}}{{if eq .Tpltype "workwechat"}}&wxuser=接受用户&wxparty=接受部门&wxtag=接受标签{{else}}{{if eq .Tpltype "fsapp"}}&at=飞书 用户open_id、user_id、union_ids、部门open_department_id{{else}}{{if eq .Tpltype "voice"}}{{else}}&phone=手机号{{end}}{{end}}{{end}}{{end}}{{end}}{{end}}{{end}}{{end}}{{end}}
						</th>
						<th>{{.Created.Format "2006-01-02 15:04:05 UTC"}}</th>
						<!--<th><a href="/template/test?id={{.Id}}" class="glyphicon glyphicon-send"></a></th>-->
						<th>
						<a href="/template/edit?id={{.Id}}" class="btn btn-default bg-success">
							<i class="fa fa-edit"></i> Edit
						</a>
						</th>
						<th>
						<a href="javascript:if(confirm('确实要删除吗?'))location='/template/del?id={{.Id}}'" class="btn btn-default bg-danger">
							<i class="fa fa-trash"></i> Delete
						</a>
						</th>

					</tr>
					{{end}}
				</tbody>
			</table>



        </div>
        <!-- /.card-body -->
        <div class="card-footer">
          特别提醒：自定义模板仅支持 /prometheusalert 接口，其他接口均为固定模版接口，不支持自定义模板
        </div>
        <!-- /.card-footer-->
      </div>
      <!-- /.card -->

    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
{{template "endhtml"}}
<script>
var td_array=new Array();
var td_length=document.getElementById("tpllist");
var myurl=window.location.origin;
for(var m=0;m<td_length.rows.length;m++){
	td_length.rows[m].cells[3].innerHTML=(myurl+td_length.rows[m].cells[3].innerHTML).replace(/\s/gi,'');
//uresturl.innerHTML=myurl+uresturl.innerHTML;
}

function exportTemplate(){
    let data = {{.Template}}
    var content = JSON.stringify(data);
    var blob = new Blob([content], {type: "text/plain;charset=utf-8"});
    saveAs(blob, "prometheus-alert-template.json");
}

function importTemplate() {
   var inputElement = document.getElementById("files");
   var selectedFile = document.getElementById("files").files[0];//获取读取的File对象
   if (selectedFile == null){
	  alert('请点击选择文件，先选中需要导入的模版文件');
   } else {
     var name = selectedFile.name;//读取选中文件的文件名
     var size = selectedFile.size;//读取选中文件的大小
     var reader = new FileReader();//这里是核心！！！读取操作就是由它完成的。
     reader.readAsText(selectedFile);//读取文件的内容

      reader.onload = function(){
          let tpljson = JSON.parse(this.result);
          $.ajax({
          	type: "POST",
          	dataType: "json",
          	url: '{{ urlfor "MainController.ImportTpl"}}',
          	data: JSON.stringify(tpljson),
			contentType : "application/json",
          	success: function (result) {
          		console.log(result);
          		if (result == null) {
          			alert("模版导入成功!");
          		} else {
          			alert(result);
          		};
          	},
          });



      };
   };

}
 
 
</script>
{{template "jshtml"}}